<template>
  <div>
    <section class="player-control d-flex justify-content-start">
      <div class="player-control-songinfo d-flex justify-content-start">
        <!-- <div class="img "> -->
        <!-- 新添加 a 标签进行页面跳转 -->
        <router-link
          class="img pointer"
          :to="{
            path: '/player',
            query: {
              id: this.$store.state.musicId,
            },
          }"
          v-if="this.$store.state.isre"
          ><img :src="songs.al.picUrl" alt="" />
        </router-link>

        <a class="img pointer" @click="back" v-if="!this.$store.state.isre"
          ><img :src="songs.al.picUrl" alt="" />
        </a>

        <!-- <router-link  class="img pointer" :to="{
                  path:'/recommendList',
                  query:{
                    id:this.$store.state.recommendId
                  }
                }
                  "
                   v-if="isrecom"
                  ><img :src="songs.al.picUrl"
                        alt="">
                  </router-link> -->
        <!-- <a class="img pointer" href="#/player/:167882" id="playerCover">
                    
                </a> -->
        <a
          class="img pointer display-none"
          href="#/recommendList/:3136952023"
          id="playerCoverBack"
        >
          <img src="" alt="" />
        </a>
        <!-- </div> -->
        <div class="songinfo d-flex flex-column align-items-start">
          <span class="songname">{{ songs.name }}</span>
          <span class="single-text-omitted singer">{{ songs.ar[0].name }}</span>
        </div>
      </div>
      <div class="player-control-unit d-flex justify-content-between">
        <div class="control">
          <!-- 新增加上一首的 id 选择器 -->
          <svg class="icon" aria-hidden="true" id="player-prev" @click="prev">
            <use xlink:href="#icon-yduishangyiqu"></use>
          </svg>
          <!-- 新增加播放暂停的 id 选择器 -->
          <svg
            class="icon"
            aria-hidden="true"
            id="player-control"
            @click="crotonlMusic"
          >
            <use
              xlink:href="#icon-zanting"
              v-if="!this.$store.state.isaudio"
            ></use>
            <use
              xlink:href="#icon-bofangzhong"
              v-if="this.$store.state.isaudio"
            ></use>
          </svg>
          <!-- 新增加下一首的 id 选择器 -->
          <svg class="icon" aria-hidden="true" id="player-next" @click="next">
            <use xlink:href="#icon-yduixiayiqu"></use>
          </svg>
        </div>
        <div class="d-flex justify-content-between">
          <!-- 播放进度和音量 -->
          <div class="song-progress d-flex justify-content-between">
            <span class="current-time" id="starttime">00:00</span>
            <div
              class="progress"
              id="progress-bar"
              ref="timeshow"
              @click="changeMusic($event)"
            >
              <div class="progress-bar" id="timenow"></div>
              <div class="progress-dot" id="circle"></div>
            </div>
            <span class="total-time" id="totaltime">{{
              formatSongTime(songs.dt)
            }}</span>
          </div>
          <div class="volume d-flex">
            <svg class="icon volume-icon" aria-hidden="true">
              <use xlink:href="#icon-yinliang"></use>
            </svg>
            <div class="progress" id="volume-bar" @click="changeVoice($event)">
              <div class="progress-bar" id="voiceNow"></div>
              <div class="progress-dot" id="voiceCicle"></div>
            </div>
          </div>
        </div>

        <div class="list">
          <!-- 新增加播放模式的 id 选择器 -->
          <svg
            class="icon"
            aria-hidden="true"
            id="musicMode"
            @click="changeModel"
          >
            <use xlink:href="#icon-liebiaoxunhuan" v-if="model === 1"></use>
            <use xlink:href="#icon-suijibofang" v-if="model === 2"></use>
            <use xlink:href="#icon-danquxunhuan" v-if="model === 3"></use>
          </svg>
          <!-- 新增加播放列表的 id 选择器 -->
          <svg
            class="icon"
            aria-hidden="true"
            id="playerList"
            @click="playList"
          >
            <use xlink:href="#icon-24gl-playlist3"></use>
          </svg>
        </div>
      </div>
    </section>
    <!-- 新添加音频 -->
    <audio :src="$store.state.audiosrc" id="myAudio"></audio>
    <!-- 播放列表 -->
    <div class="player-list-ul1" v-show="playlist">
      <div class="h4">
        <h4>播放列表</h4>
        <!-- <button class="clear">清空</button> -->
      </div>
      <div class="player-list-ul">
        <li
          class="player-list-li d-flex justify-content-start pointer"
          v-for="(s, index) in listsongs"
          :key="s.id"
          @dblclick="startMusic(s.id, index)"
        >
          <svg class="icon" aria-hidden="true" v-if="musicId == s.id">
            <use xlink:href="#icon-bofangzhong"></use>
          </svg>
          <div class="song-name single-text-omitted">{{ s.name }}</div>
          <div class="singer">{{ s.ar[0].name }}</div>
          <div class="song-time">
            {{ Math.floor(s.dt / 1000 / 60) }}:{{
              Math.round((s.dt / 1000) % 60)
            }}
          </div>
        </li>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "Footer",
  data() {
    return {
      model: 1,
      playlist: false,
    };
  },
  computed: {
    musicId: {
      get() {
        return this.$store.state.musicId;
      },
      set(value) {
        return (this.$store.state.musicId = value);
      },
    },
    songs() {
      return this.$store.state.musicDetail;
    },
    listsongs() {
      return this.$store.state.playList;
    },
    playListLength() {
      return this.$store.state.playList.length;
    },
  },

  methods: {
    ...mapMutations(["CHANGEMUSIC", "STARTMUSIC", "MUSICID", "INDEX"]),
    startMusic(musicId, index) {
      this.CHANGEMUSIC(
        `https://music.163.com/song/media/outer/url?id=${musicId}`
      );
      this.STARTMUSIC(true);
      this.MUSICID(musicId);
      this.INDEX(index);
      this.$store.dispatch("getMusic", musicId);
    },
    // 是否展示列表
    playList() {
      if (this.playlist) {
        this.playlist = false;
      } else {
        this.playlist = true;
      }
    },
    // 改变播放模式
    changeModel() {
      this.model++;
      if (this.model > 3) {
        this.model = 1;
      }
    },
    //下一首
    next() {
      //console.log('aaaaa1111');
      if (this.model == 1 || this.model == 3) {
        if (this.$store.state.index + 1 > this.playListLength - 1) {
          this.$store.state.index = 0;
        } else {
          this.$store.state.index++;
        }
      } else if (this.model == 2) {
        this.$store.state.index = Math.floor(
          Math.random() * this.playListLength - 1
        );
      }
      if (this.playListLength == 0) {
        console.log("当前播放列表为空");
      } else {
        //console.log(this.$store.state.recommendSonglist[this.$store.state.index+1].id);
        this.$store.dispatch(
          "getMusic",
          this.$store.state.playList[this.$store.state.index].id
        );
        this.$store.commit(
          "CHANGEMUSIC",
          `https://music.163.com/song/media/outer/url?id=${
            this.$store.state.playList[this.$store.state.index].id
          }`
        );
        this.$store.dispatch(
          "musicLyric",
          this.$store.state.playList[this.$store.state.index].id
        );
        this.musicId = this.$store.state.play;
        List[this.$store.state.index].id;
      }
    },
    prev() {
      if (this.model == 1 || this.model == 3) {
        if (this.$store.state.index - 1 < 0) {
          this.$store.state.index = this.playListLength - 1;
        } else {
          this.$store.state.index--;
        }
      } else if (this.model == 2) {
        this.$store.state.index = Math.floor(
          Math.random() * this.playListLength - 1
        );
      }
      //console.log(this.$store.state.recommendSonglist[this.$store.state.index+1].id);
      if (this.playListLength == 0) {
        console.log("当前播放列表为空");
      } else {
        this.$store.dispatch(
          "getMusic",
          this.$store.state.playList[this.$store.state.index].id
        );
        this.$store.commit(
          "CHANGEMUSIC",
          `https://music.163.com/song/media/outer/url?id=${
            this.$store.state.playList[this.$store.state.index].id
          }`
        );

        this.musicId = this.$store.state.playList[this.$store.state.index].id;
      }
    },
    //返回
    back() {
      this.$router.back();
    },

    // },
    formatSongTime(data1) {
      const data = new Date(data1);
      return data.getMinutes() + ":" + data.getSeconds();
    },
    // 音乐暂停与播放
    crotonlMusic() {
      if (this.$store.state.isaudio) {
        this.$store.state.isaudio = false;
      } else {
        this.$store.state.isaudio = true;
      }
    },
    initShow() {
      // 实现显示播放进度条
      myAudio.addEventListener("timeupdate", (e) => {
        starttime.innerHTML = `${Math.floor(
          e.target.currentTime / 60
        )}:${Math.floor(e.target.currentTime % 60)}`;
        var alltime = this.songs.dt / 1000;
        var tlength = 350;
        this.$refs.timeshow.style.width = tlength + "px";
        const timelength = (tlength / alltime) * e.target.currentTime;
        timenow.style.width = `${timelength}` + `px`;
        circle.style.left = `${timelength}` + `px`;
      });

      voiceNow.style.width = 50 * myAudio.volume + `px`;
      voiceCicle.style.left = 50 * myAudio.volume + `px`;
    },
    // 控制音乐进度
    changeMusic(e) {
      console.log(e.offsetX);
      console.log(e.offsetX / 350);
      const percent = e.offsetX / 350;
      const totalTime = myAudio.duration;
      myAudio.currentTime = percent * totalTime;
    },
    // 控制声音
    changeVoice(e) {
      const percent = e.offsetX / 50;
      console.log(percent);
      console.log(musicMode.volume);
      myAudio.volume = percent;
      // const shengyin=50*percent;
      voiceNow.style.width = 50 * myAudio.volume + `px`;
      voiceCicle.style.left = 50 * myAudio.volume + `px`;
    },
  },
  updated() {
    if (this.$store.state.isaudio) {
      myAudio.play();
    } else {
      myAudio.pause();
    }
  },
  mounted() {
    this.$store.dispatch("getMusic", this.$store.state.musicId);
    this.initShow();
    this.$store.commit("ISRE", true);
    //用来监听歌曲结束选择下一首
    myAudio.addEventListener("ended", () => {
      this.next();
    });
  },
};
</script>

<style>
.player-list-ul1 {
  position: absolute;
  right: 0;
  top: 7.9%;

  width: 40%;
  height: 83%;
  background-color: #d6d0d0;
  z-index: 1000;
  overflow: auto;
}

.player-list-li {
  position: relative;
}
.player-list-ul1 .song-name {
  width: 100px;
  position: absolute;
  left: 20px;
}
.player-list-ul1 .singer {
  width: 100px;
  position: absolute;
  left: 130px;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.player-list-li .song-time {
  margin-left: 280px;

  left: 200px;
}

.h4 {
  /* display: block; */
  height: 6%;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 8px;
  line-height: 35px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
}

.h4 > button {
  width: 15%;
  height: 85%;
  margin-top: 3px;
  background-color: rgb(43, 182, 105);
  border-radius: 3px;
  border: none;
  cursor: pointer;
}

.player-list-ul {
  width: 90%;
  margin-left: 10px;
}

.display-block1 {
  display: block;
}

/* 页面底部html结构样式开始 */
.wrapper .player-control {
  background-color: #f6f6f8;
  height: 65px;
  width: 100%;
}

.player-control-songinfo {
  width: 15%;
  margin-left: 10px;
  min-height: 80%;
}

.player-control-unit {
  flex-grow: 1;
  margin: 0 20px;
}
.player-control-songinfo .img {
  width: 50%;
  height: 100%;
  overflow: auto;
  border-radius: 5px;
  font-size: 0;
}

.player-control-songinfo .img > img {
  width: 100%;
  height: 100%;
}

.player-control-songinfo .songinfo {
  width: 50%;
}

.player-control-songinfo .songinfo > span {
  margin: 4px;
  margin-left: 6px;
  width: 100%;
}

.player-control-songinfo .songinfo > .songname {
  font-size: 16px;
}

.player-control-songinfo .songinfo > .singer {
  font-size: 14px;
}
.player-control-unit .control {
  font-size: 35px;
}

.player-control-unit .list {
  font-size: 25px;
}

.player-control-unit .song-progress .current-time {
  margin-right: 5px;
}

.player-control-unit .song-progress .total-time {
  margin-left: 5px;
}

.player-control-unit .volume {
  margin-left: 20px;
}

.player-control-unit .volume .volume-icon {
  margin-right: 5px;
}

.player-control-unit .progress {
  height: 4px;
  background-color: #ccc;
  position: relative;
}

.player-control-unit #progress-bar {
  width: 350px;
}

.player-control-unit #volume-bar {
  width: 50px;
}
.player-control-unit .progress .progress-bar {
  position: absolute;
  /* width: 50%; */
  height: 4px;
  background-color: #4dc376;
}
.player-control-unit .progress .progress-dot {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #4dc376;
}
/* 页面底部html结构样式结束 */
</style>
